<template>
  <div class="container-box">
    <h2>收费明细管理</h2>
    &nbsp;
    <span> 用于展示物业收费明细列表信息，以及增加、修改、删除等操作 </span>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-form
            ref="form"
            label-position="top"
            label-width="80px"
            :inline="true"
            size="small"
          >
            <el-form-item label="小区名称">
              <el-select
                v-model="queryData.community_code"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code" /></el-select
            ></el-form-item>

            <el-form-item label="收费项目">
              <el-select
                v-model="queryData.community_code"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code" /></el-select
            ></el-form-item>
            <el-form-item label="房产信息">
              <el-select
                v-model="queryData.community_code"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code" /></el-select
            ></el-form-item>
            <el-form-item label="时间">
              <div class="block">
                <el-date-picker
                  v-model="timeVlaue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </el-form-item>
            <el-form-item class="weizhiaa">
              <el-button @click="onSearchReset">重置</el-button>
              <el-button type="primary" @click="onSearchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <div class="dada">
        <el-card
          class="bottom"
          shadow="always"
          :body-style="{ padding: '20px' }"
        >
          <el-row type="flex" justify="space-between" align="middle">
            <div class="left" />
            <div class="right">
              <el-button
                type="primary"
                plain
                size="small"
                @click="dialogShow = true"
                >新增</el-button
              >
            </div>
          </el-row>
          <el-table :data="list" stripe>
            <!-- prop表示这一列展示哪个数据 -->
            <el-table-column width="55%" prop="id" label="ID" />
            <el-table-column prop="community.name" label="小区名称" />
            <el-table-column prop="expenses_project.name" label="收费项目" />
            <el-table-column label="房产信息" prop="building">
              <template slot-scope="{ row }">
                <span v-if="row.building">
                  {{ row.building.name + "栋" }}{{ row.house.name }}【{{
                    row.house.owner_name
                  }}】</span
                >
                <span v-else>未知</span>
              </template>
            </el-table-column>

            <el-table-column prop="amount_total" label="应收金额" />
            <el-table-column prop="amount_paid" label="实收金额" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column width="195%" prop="create_time" label="创建时间" />

            <!-- 表格列个性化渲染 -->
            <!-- <el-table-column prop="icon" label="图标class">
          <template slot-scope="scope">
            <b>{{ scope.row.icon }}</b>
            <i :class="`fa ${scope.row.icon}`" />
          </template>
        </el-table-column> -->

            <!-- <el-table-column prop="sort_num" label="权重" /> -->
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button size="small" type="text" @click="editRow(row.id)"
                  >编辑</el-button
                >&nbsp;
                <el-popconfirm title="确定删除吗？" @confirm="delRow(row.id)">
                  <el-button slot="reference" size="small" type="text"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <!--分页区域-->
    <div class="page">
      <el-pagination
        :current-page.sync="queryData.current"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

    <div class="div_fot">Ant Design Pro黑马前端合肥前端欢迎您</div>
    <div class="div_foot">&copy;2023 悦兴物业集团</div>
    <!-- 弹框区域 -->
    <el-drawer
      :title="title"
      :visible.sync="dialogShow"
      size="800px"
      @close="btnCancel"
    >
      <div class="tankuang">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="150px"
          label-position="top"
        >
          <el-row>
            <el-col :span="11">
              <el-form-item label="所属小区" prop="community_code">
                <el-select
                  v-model="formData.community_code"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                /></el-select> </el-form-item
            ></el-col>

            <el-col :span="11">
              <el-form-item label="收费项目" prop="project_code">
                <el-select
                  v-model="formData.project_code"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in optionsss"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                /></el-select> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <el-form-item label="所属楼栋" prop="house">
                <el-select
                  v-model="formData.house"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in optionss"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                /></el-select> </el-form-item
            ></el-col>

            <el-col :span="11">
              <el-form-item label="所属房产" prop="building">
                <el-select
                  v-model="formData.building"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.building?.name"
                    :value="item.building_code"
                /></el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="应收金额" prop="amount_total">
                <el-input
                  v-model="formData.amount_total"
                  size="medium"
                  class="inputW"
                  placeholder="请输入"
                /> </el-form-item
            ></el-col>

            <el-col :span="11">
              <el-form-item label="实收金额" prop="amount_paid">
                <el-input
                  v-model="formData.amount_paid"
                  placeholder="请输入"
                  size="medium"
                  class="inputW"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="描述" prop="remark">
                <el-input
                  v-model="formData.remark"
                  size="medium"
                  class="inputda"
                  placeholder="请输入"
                  type="textarea"
                  :rows="12"
                /> </el-form-item
            ></el-col>

            <el-col :span="11" />
          </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="enniu">
          <el-button size="medium" @click="dialogShow = false">取消</el-button>
          <el-button size="medium" type="primary" @click="btnOk"
            >确定</el-button
          >
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getBuildingListApi,
  getsApi,
  getNameApi,
  addBuildingApi,
  editoleApi,
  delRoleApi,
  getbuildcodeApi,
  getprojectApi,
} from "@/api/houseindex";
// import { getTagList, addTag, editTag, getTagInfo, delTag } from '@/api/tag'
export default {
  name: "expenses",
  data() {
    return {
      timeVlaue: "",
      list: [],
      options: [],
      optionss: [],
      optionsss: [],
      queryData: {
        house_code: "",
        project_code: "",
        current: 1,
        pageSize: 10,
        community_code: "",
        create_time: "",
        end_time: "",
      },

      formData: {
        expenses_project: "",
        amount_paid: "",
        amount_total: "",
        community_code: "",
        community: "",
        building: "",
        create_time: "",
        project_code: "",
        remark: "",
        house: "",
        building_code: "",

        house_code: "",
      },

      formRules: {
        expenses_project: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        amount_paid: [{ required: true, message: "不能为空", trigger: "blur" }],
        amount_total: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        community_code: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        building_code: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        remark: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      // 总数
      total: 0,
      // 控制弹框的显示
      dialogShow: false,
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改楼栋" : "添加楼栋";
    },
  },
  watch: {
    timeVlaue() {
      console.log(this.timeVlaue);
      this.queryData.create_time = +new Date(this.timeVlaue[0]);
      this.queryData.end_time = +new Date(this.timeVlaue[1]);
      const timearray = [this.queryData.create_time, this.queryData.end_time];
      this.queryData.create_time = timearray.join(",");
      console.log(this.queryData.create_time);
    },
  },
  created() {
    this.initData();
    this.getNameApia();
    this.getbuildcodeAp();
    this.getProject();
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getBuildingListApi(this.queryData);
      console.log(res);
      this.list = res.data.rows;
      console.log(this.list);

      this.list = this.list.map((item) => {
        item.create_time = this.$moment(item.create_time).format(
          "YYYY-MM-DD h:mm:ss"
        );
        return item;
      });
      //  .forEach(item => {
      // // JSON.stringify(item.community)
      //   item.community = item.community.name
      // })
      console.log(this.list);
      this.total = res.data.count;
    },
    async getNameApia() {
      const res = await getNameApi();
      console.log(res);
      this.options = res.data;
      console.log(this.options);
    },
    async getProject() {
      const res = await getprojectApi();
      this.optionsss = res.data;
      console.log(this.optionsss);
    },

    async getbuildcodeAp() {
      const re = await getbuildcodeApi();
      console.log(re);
      this.optionss = re.data;
      console.log(this.optionss);
    },
    // 筛选表单搜索条件
    onSearchSubmit() {
      this.queryData.current = 1;
      this.initData();
    },
    // 筛选表单重置
    onSearchReset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        community_code: "",
        create_time: "",
        end_time: "",
      };
      this.timeVlaue = "";
      this.initData();
    },
    // 每页数量切换事件
    sizeChange(val) {
      console.log(val);
      this.queryData.pageSize = val;
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      console.log(val);
      this.queryData.current = val;
      this.initData();
    },
    // 新增/修改标签
    async btnOk() {
      await this.$refs.form.validate();

      this.formData.id
        ? await editoleApi(this.formData)
        : await addBuildingApi(this.formData);

      // await this.$refs.form.+()

      this.$message.success(this.formData.id ? "修改楼栋成功" : "添加楼栋成功");
      this.dialogShow = false;
      this.initData();
    },
    // 清空表单和校验
    btnCancel() {
      this.formData = {};
      this.$refs.form.clearValidate();
    },
    // 修改标签
    async editRow(id) {
      // this.formData.id = id
      const res = await getsApi(id);
      console.log(res);

      this.formData = res.data;
      console.log(this.formData);

      this.dialogShow = true;
    },
    // 删除标签
    async delRow(id) {
      console.log("1");
      await delRoleApi(id);
      this.$message.success("删除成功");
      if (this.queryData.current > 1 && this.list.length === 1) {
        this.queryData.current--;
      }
      this.initData();
    },
  },
};
</script>
<style>
body {
  background-color: rgb(247, 248, 250);
  padding: 30px;
}
h2 {
  display: inline-block;
}
.container-box {
  padding: 30px;
}
.filter-form,
.tool-bar {
  background-color: rgb(255, 255, 255);
  padding: 15px;
  margin-bottom: 10px;
}
.tool-bar .weizhiaa {
  display: block;
  position: absolute;
  margin-top: -51px;
  margin-left: 1100px;
}

.dada .dadw {
  height: 22px;
}
.div_fot {
  font-size: 15px;
  color: rgb(86, 87, 87);

  margin-top: 60px;

  text-align: center;

  width: 100%;
}
.div_foot {
  margin-top: 20px;

  font-size: 15px;

  text-align: center;

  width: 100%;
}
.dada .bottom {
  margin-top: 30px;
}
.tankuang .el-input {
  width: 320px;
  margin-left: 32px;
  padding-right: px;
}
.tankuang .inputW {
  height: 32px;
}
.el-form-item__label {
  font-size: 18px;
  font-weight: 400;
  margin-left: 32px;
}
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 32px;
  padding-right: px;
}
.tankuang .inputda {
  margin-left: 32px;
  padding-right: 32px;
}
.tankuang .enniu {
  margin-right: 20px;
}
</style>
